import React from "react";
import { connect } from "react-redux";
import {
  deleteGoodsCreator,
  updateGoodsCount,
} from "../store/creators/cart.creator";
import { addGoodsToWishCreator } from "../store/creators/wish.creator";

// 更新商品数量
// 1. 定义用于修改商品数量的 action (type、action creator)
// 2. 在 reducer 函数中接收 action 对象, 根据 action 进行状态更新并返回
// 3. 为修改数量的按钮添加点击事件, 当事件被触发以后, 调用 dispatch 方法发出修改商品数量的命令
// 4. 将商品数量和页面中的文本框进行绑定

// 删除商品
// 1. 创建用于删除商品的 action (type、action creator)
// 2. 在 reducer 函数中接收 action 对象, 根据 action 进行状态更新并返回
// 3. 为删除按钮添加点击事件, 事件被触发以后, 发送删除商品的命令

class CartItem extends React.Component {
  render() {
    const {
      id,
      picture,
      title,
      color,
      size,
      count,
      price,
      updateGoodsCount,
      deleteGoods,
      addGoodsToWish,
    } = this.props;
    return (
      <div className="row">
        <div className="col-lg-3 col-md-12 mb-4 mb-lg-0">
          {/* 商品图片 */}
          <div
            className="bg-image hover-overlay hover-zoom ripple rounded"
            data-mdb-ripple-color="light"
          >
            <img src={picture} className="w-100" alt="" />
          </div>
          {/* 商品图片 */}
        </div>
        <div className="col-lg-5 col-md-6 mb-4 mb-lg-0">
          {/* 商品信息 */}
          <p>
            <strong>{title}</strong>
          </p>
          <p>颜色: {color}</p>
          <p>尺码: {size}</p>
          <button
            type="button"
            className="btn btn-primary btn-sm me-1 mb-2"
            data-mdb-toggle="tooltip"
            title="Remove item"
            onClick={() => deleteGoods(id)}
          >
            <i className="fas fa-trash" />
          </button>
          <button
            type="button"
            className="btn btn-danger btn-sm mb-2"
            data-mdb-toggle="tooltip"
            title="Move to the wish list"
            onClick={() =>
              addGoodsToWish({ id, picture, title, color, size, count, price })
            }
          >
            <i className="fas fa-heart" />
          </button>
          {/* 商品信息 */}
        </div>
        <div className="col-lg-4 col-md-6 mb-4 mb-lg-0">
          {/* 商品数量 */}
          <div className="d-flex mb-4" style={{ maxWidth: 300 }}>
            <button
              className="btn btn-primary px-3 me-2"
              onClick={() => updateGoodsCount({ id, count: count - 1 })}
            >
              <i className="fas fa-minus" />
            </button>
            <div className="form-outline">
              <input
                min={0}
                name="quantity"
                value={count}
                type="number"
                className="form-control"
                readOnly
              />
            </div>
            <button
              className="btn btn-primary px-3 ms-2"
              onClick={() => updateGoodsCount({ id, count: count + 1 })}
            >
              <i className="fas fa-plus" />
            </button>
          </div>
          {/* 商品数量 */}
          {/* 商品价格 */}
          <p className="text-start text-md-center">
            <strong>¥{count * price}</strong>
          </p>
          {/* 商品价格 */}
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => ({
  // 修改商品数量
  updateGoodsCount({ id, count }) {
    dispatch(updateGoodsCount({ id, count }));
  },
  // 删除商品
  deleteGoods(id) {
    dispatch(deleteGoodsCreator(id));
  },
  // 将商品移入心愿单
  addGoodsToWish(goods) {
    // 将商品移入心愿单
    dispatch(addGoodsToWishCreator(goods));
    // 将商品从购物车中移除
    dispatch(deleteGoodsCreator(goods.id));
  },
});

export default connect(undefined, mapDispatchToProps)(CartItem);
